import { onMounted, onUnmounted, defineComponent } from 'vue'

const Bar = defineComponent({
  name: 'Bar',
  setup() {
    onMounted(() => {
      console.debug('bar onMounted')
    })
    onUnmounted(() => {
      console.debug('bar onUnmounted')
    })
  },
  render() {
    return <div>bar</div>
  }
})

export default defineComponent({
  setup() {
    onMounted(() => {
      console.debug('foo onMounted')
    })
    onUnmounted(() => {
      console.debug('foo onUnmounted')
    })
  },
  render() {
    return <div>foo page: <Bar /></div>
  }
})
